<template>
    <form @submit.prevent="submit">
        <!-- 分类名称 -->
        <div class="mb-2">
            <input id="categoryName" v-model="form.name" class="form-control" :class="{ 'is-invalid': errors.name }"
                required maxlength="20" @blur="validateName" placeholder="请输入分类名称" />
            <div v-if="errors.name" class="invalid-feedback">
                {{ errors.name }}
            </div>
        </div>

        <!-- 分类 -->
        <div class="col-md-2 mb-2">
            <select id="categoryType" v-model="form.type" class="form-select" required>
                <option value="0">收入</option>
                <option value="1">支出</option>
            </select>
        </div>

        <!-- 图标选择 -->
        <div class="mb-3">
            <IconPicker v-model="form.icon" />
        </div>

        <!-- 颜色选择 -->
        <div class="mb-3">
            <div class="d-flex gap-2 flex-wrap" role="radiogroup" aria-label="选择颜色">
                <span v-for="c in colorOptions" :key="c.class" class="color-circle"
                    :class="[c.class, form.color === c.class ? 'selected' : '']" @click="selectColor(c.class)"
                    @keydown.enter.space="selectColor(c.class)" role="radio" :aria-checked="form.color === c.class"
                    :title="c.name" tabindex="0">
                    <span v-if="form.color === c.class" class="check-icon text-white fw-bold">✓</span>
                </span>
            </div>
        </div>

        <!-- ✅ 实时预览区域 -->
        <div class="mb-2">
            <div class="d-flex align-items-center gap-3 p-2 border rounded">
                <i :class="[form.icon, form.color]" style="font-size: 1.5rem"></i>
                <div>
                    <div class="fw-semibold">{{ form.name || '未命名分类' }}</div>
                    <div class="small text-muted">
                        图标：<code :class="form.color">{{ form.icon }}</code>
                    </div>
                    <div class="small text-muted">
                        颜色：<code :class="form.color">{{ form.color }}</code>
                    </div>
                </div>
            </div>
        </div>

        <!-- 提交/取消按钮 -->
        <div class="text-end">
            <button class="btn btn-secondary me-2" type="button" @click="$emit('cancel')">取消</button>
            <button class="btn btn-primary" type="submit" :disabled="loading">
                <span v-if="loading" class="spinner-border spinner-border-sm me-1"></span>
                保存
            </button>
        </div>
    </form>
</template>

<script setup>
import { ref, watch } from 'vue';
import IconPicker from './ui/IconPicker.vue'; // 图标选择器组件
import { useApi } from '../composables/useApi'; // 通用请求 hook
import { useToast } from '../composables/useToast';

// Toast 组合函数：用于显示 success/error 消息
const { success, error } = useToast();

// 接收传入的 initialData（用于编辑时填充初始值）
const props = defineProps({
    initialData: {
        type: Object,
        default: null
    }
});

// 向父组件发送事件，'saved' 表示保存成功
const emit = defineEmits(['saved', 'cancel']);

// 响应式表单数据
const form = ref({
    name: '', // 分类名称
    type: 1, // 1: 支出, 0: 收入
    icon: 'bi-bookmarks-fill', // 默认图标
    color: 'text-primary' // 默认颜色
});

// 表单错误信息
const errors = ref({
    name: ''
});

// ---------------------- 表单重置函数 ----------------------
const resetForm = () => {
    form.value = {
        name: '',
        type: 1,
        icon: 'bi-bookmarks-fill',
        color: 'text-primary'
    };
    errors.value.name = '';
};

// 请求状态
const loading = ref(false);

// 监听传入的 initialData，如果存在，则用其数据初始化表单
watch(
    () => props.initialData,
    val => {
        if (val) {
            form.value = { ...val };
        } else {
            resetForm();
        }
    },
    { immediate: true }
);

// 颜色选项列表（使用 Bootstrap 的 text-* 类）
const colorOptions = [
    { class: 'text-primary', name: '蓝色（Primary）' },
    { class: 'text-success', name: '绿色（Success）' },
    { class: 'text-danger', name: '红色（Danger）' },
    { class: 'text-warning', name: '黄色（Warning）' },
    { class: 'text-info', name: '青色（Info）' },
    { class: 'text-secondary', name: '灰色（Secondary）' },
    { class: 'text-dark', name: '黑色（Dark）' }
];

// 验证分类名称
const validateName = () => {
    if (!form.value.name.trim()) {
        errors.value.name = '分类名称不能为空';
        return false;
    }
    if (form.value.name.length > 20) {
        errors.value.name = '分类名称不能超过20个字符';
        return false;
    }
    errors.value.name = '';
    return true;
};

// 选择颜色
const selectColor = (colorClass) => {
    form.value.color = colorClass;
};

// 提交表单
async function submit() {
    // 验证表单
    if (!validateName()) {
        return;
    }

    loading.value = true;

    // 根据是否是编辑模式，决定使用 PUT 还是 POST
    const apiConfig = props.initialData?.id
        ? {
            url: `/transactions/save/category/${props.initialData.id}`,
            method: 'PUT',
            data: form.value,
            manual: true
        }
        : {
            url: '/transactions/save/category',
            method: 'POST',
            data: form.value,
            manual: true
        };

    try {
        const { loading, result, fetchData } = useApi(apiConfig);
        await fetchData();
        const response = result.value;

        // 检查响应数据
        if (response && response.code !== 0) {
            // 显示错误信息
            error(response.msg || '操作失败');
            // 保持模态框打开，不触发saved事件
            return;
        }

        // 成功情况
        emit('saved'); // 通知父组件保存成功，父组件刷新
        success('标签保存成功~');
    } catch (err) {
        console.error('保存分类失败:', err);
        // 优先显示服务器返回的错误信息
        if (err.response?.data?.msg) {
            error(err.response.data.msg);
        } else if (err.response?.data?.message) {
            error(err.response.data.message);
        } else if (err.message && err.message !== 'Network Error') {
            error(err.message);
        } else {
            error('网络异常，请稍后重试');
        }
    } finally {
        loading.value = false;
    }
}
</script>

<style scoped>
/* 颜色选择圆圈样式 */
.color-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    /* 添加背景颜色，使用当前文本颜色作为背景 */
    background-color: currentColor;
    border: 2px solid transparent;
}

.color-circle:hover,
.color-circle:focus {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.color-circle.selected {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
    position: relative;
    /* 为选中的圆圈添加白色边框 */
    border-color: white;
    /* 添加深色边框以增强对比度 */
    box-shadow: 0 0 0 2px currentColor, 0 0 0 4px rgba(0, 0, 0, 0.2);
}

.check-icon {
    font-size: 0.75rem;
}
</style>